<template>
  <div>
    <div class="header">
      <i class="el-icon-s-opportunity"></i> zspt 照明灯各区照明所耗功率
    </div>
    <el-table ref="table" :data="roomLightData" stripe style="width: 100%;margin-bottom: 80px;" height="390" id="scoll">
      <el-table-column type="index" width="60" align="center"></el-table-column>
      <el-table-column prop="name" label="照明灯名称" sortable align="center"></el-table-column>
      <el-table-column prop="location" label="位置" align="center"></el-table-column>
      <el-table-column prop="time" label="采集时间" sortable align="center"></el-table-column>
      <el-table-column prop="loopCounter" label="采集频率" align="center"></el-table-column>
      <el-table-column prop="uuid" label="uuid" align="center"></el-table-column>
    </el-table>
    <div id="radar" style="width: 1080px;height: 250px;margin-left: 10%;"></div>
  </div>
</template>

<script>
  export default {
    name: 'roomLight',
    data() {
      return {
        roomLightData: require('../../../assets/json/roomLight.json'),
      }
    },
    mounted() {
      this.drawLine();
      this.tableScroll();
    },
    methods: {
      tableScroll() {
        // 拿到表格挂载后的真实DOM
        const table = this.$refs.table;
        // 拿到表格中承载数据的div元素
        const divData = table.bodyWrapper;
        // 拿到元素后，对元素进行定时增加距离顶部距离，实现滚动效果(此配置为每100毫秒移动1像素)
        setInterval(() => {
          // 元素自增距离顶部1像素
          divData.scrollTop += 1;
          // 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)
          if (divData.clientHeight + divData.scrollTop + 1 > divData.scrollHeight) {
            // 重置table距离顶部距离
            divData.scrollTop = 0;
          }
        }, 100);
        window.onresize = () => {
          return (() => {
            window.screenHeight = document.body.clientHeight;
            this.clientHeight = window.screenHeight;
          })()
        }
      },
      drawLine() {
        // 基于准备好的dom，初始化echarts实例
        let myChart = this.$echarts.init(document.getElementById('radar'));
        myChart.setOption({
          color: ['#67F9D8', '#386b9e', '#ff5500'],
          title: {
            text: 'zspt 照明灯各区照明每周所耗功率'
          },
          legend: {
            data: ['东区', '西区','北区']
          },
          radar: {
            indicator: [
              { name: 'Mon', max: 7500 },
              { name: 'Tue', max: 20000 },
              { name: 'Wed', max: 36000 },
              { name: 'Thu', max: 48000 },
              { name: 'Fri', max: 62000 },
              { name: 'Sat', max: 35000 },
              { name: 'Sun', max: 25000 }
            ],
            splitArea: {
              areaStyle: {
                color: ['#28d3ce', '#64AFE9', '#4695e3'],
                shadowColor: 'rgba(0, 0, 0, 0.2)',
                shadowBlur: 10
              }
            },
            axisLine: {
              lineStyle: {
                color: 'rgba(211, 253, 250, 0.8)'
              }
            }
          },
          series: [
            {
              name: 'contrast',
              type: 'radar',
              data: [
                {
                  value: [4200, 3000, 20000, 35000, 48000, 18000,13000],
                  name: '东区',
                  areaStyle: {
                    color: 'rgba(255, 228, 52, 0.6)'
                  }
                },
                {
                  value: [5000, 14000, 28000, 26000, 42000, 21000,15000],
                  name: '西区',
                  label: {
                    show: true
                  }
                },
                {
                  value: [3000, 10000, 10000, 16000, 32000, 16000,10000],
                  name: '北区'
                }
              ]
            }
          ]
        })
        window.addEventListener("resize", function() { //自动适应大小
        	myChart.resize();
        });
      }
    }
  }
</script>

<style>
  @import url("../../../assets/css/roadLight.css");
</style>